import React, { useRef, useLayoutEffect } from 'react';
import { gsap, Cubic, Quint, Quad } from 'gsap';

export function fadeIn(target: gsap.TweenTarget, vars?: gsap.TweenVars) {
    return gsap.from(target, { opacity: 0, ...vars });
}

export function fadeInfromBottom(target: gsap.TweenTarget, vars?: gsap.TweenVars) {
    return gsap.from(target, { opacity: 0, y: ~~(Math.random() * 20 + 10), ease: Cubic.easeInOut, ...vars });
}

export function slideUp(target: gsap.TweenTarget, vars?: gsap.TweenVars) {
    return gsap.from(target, { yPercent: 30, opacity: 0, ease: Quad.easeInOut, ...vars });
}

export function slideDown(target: gsap.TweenTarget, vars?: gsap.TweenVars) {
    return gsap.to(target, { yPercent: -30, opacity: 0, ease: Quad.easeInOut, ...vars });
}
